<template>
  <div class="questions-review">
    <el-card>
      <el-alert :title="'数据一共有'+this.total+'条'" type="info"></el-alert>
      <el-table style="width: 100%" border stripe :data="questions">
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column label="试题编号" width="180" prop="number"></el-table-column>
        <el-table-column label="学科" prop="subject" width="120px"></el-table-column>
        <el-table-column label="题型" width="120px">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType==='2'">多选</span>
            <span v-else-if="scope.row.questionType==='1'">单选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column label="题干" width="280px">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" prop="addDate" width="180">
          <template slot-scope="scope">{{scope.row.addDate|parseTimeByString}}</template>
        </el-table-column>
        <el-table-column label="录入人" prop="creator" width="120px"></el-table-column>
        <el-table-column label="审核状态" prop="chkState" width="120px">
          <template slot-scope="scope">
            <span v-if="scope.row.chkState===0">待审核</span>
            <span v-else-if="scope.row.chkState===1">已审核</span>
            <span v-else>已拒绝</span>
          </template>
        </el-table-column>
        <el-table-column label="审核意见" prop="chkRemarks" width="150px"></el-table-column>
        <el-table-column label="审核人" prop="chkUser" width="120px"></el-table-column>
        <el-table-column label="发布状态" prop="publishState" width="150px">
          <template slot-scope="scope">
            <span v-if="scope.row.publishState === 1 && scope.row.chkState === 1">已发布</span>
            <span v-else-if="scope.row.publishState === 0 && scope.row.chkState === 1">已下架</span>
            <span v-else>待发布</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button class="fs" type="text" @click="preview(scope.row)">预览</el-button>
            <el-button
              class="fs"
              type="text"
              :disabled="scope.row.chkState!==0"
              @click="audit(scope.row)"
            >审核</el-button>
            <el-button
              class="fs"
              type="text"
              :disabled="scope.row.publishState===1"
              @click="$router.push(`new?id=${scope.row.id}`)"
            >修改</el-button>
            <el-button
              class="fs"
              type="text"
              @click="upDown(scope.row)"
            >{{scope.row.publishState===1?'下架':'上架'}}</el-button>
            <el-button
              class="fs"
              type="text"
              :disabled="scope.row.publishState===1"
              @click="delQuestion(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="query.pagesize"
        layout=" prev, pager, next,sizes, jumper"
        :total="total"
      ></el-pagination>
    </el-card>

    <!-- 预览 -->

    <questions-preview ref="questionsCheck" :date="questionsInfo" />

    <!-- 审核 -->
    <questions-check :date="questionsInfos" ref="questionAudit" @update="getQuestions()" />
  </div>
</template>


<script>
import { listview, questionDel, choicePublish } from '@/api/hmmm/questions'
import QuestionsPeview from '../components/questions-previews'
import QuestionsChecks from '../components/questions-checks'
export default {
  data() {
    return {
      query: {
        page: 1,
        pagesize: 5,
      },
      total: 0,
      questions: [],
      dialogVisible: false,
      //预览
      questionsInfo: {},
      //审核
      questionsInfos: {},
      dialogVisibleShow: false,
    }
  },
  created() {
    this.getQuestions()
  },
  components: {
    'questions-preview': QuestionsPeview,
    'questions-check': QuestionsChecks,
  },
  methods: {
    async getQuestions() {
      const { data } = await listview(this.query)
      this.total = data.counts
      this.questions = data.items
      console.log(data)
    },
    //监听分页每页多少数据
    handleSizeChange(newSize) {
      this.query.pagesize = newSize
      this.getQuestions()
    },
    //监听当前页数
    handleCurrentChange(newPage) {
      this.query.page = newPage
      this.getQuestions()
    },
    //删除
    async delQuestion(question) {
      await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      await questionDel(question)
      this.$message.success('删除成功')
      this.getQuestions()
    },
    //上下架
    async upDown(question) {
      if (question.publishState === 1) {
        await this.$confirm('您确认下架这道题目吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        question.publishState = 0
        await choicePublish(question)
        this.$message.success('下架成功')
      } else {
        await this.$confirm('您确认上架这道题目吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        question.publishState = 1
        await choicePublish(question)
        this.$message.success('上架成功')
      }
    },
    //预览
    preview(question) {
      this.questionsInfo = question
      this.$nextTick(() => {
        this.$refs.questionsCheck.open()
      })
    },
    //审核
    audit(question) {
      this.questionsInfos = question
      this.$nextTick(() => {
        this.$refs.questionAudit.open()
      })
    },
  },
}
</script>s

<style lang="less" scoped>
.questions-review {
  .el-pagination {
    margin-top: 10px;
    float: right;
  }
  .fs {
    font-size: 12px;
  }
}
</style>